<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" />
        <link rel="stylesheet" href="./css_js/swiper-bundle.min.css" />
        <script src="./css_js/swiper-bundle.min.js"></script>
        <!-- <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
		<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> -->
        <title>Document</title>
        <style>
            .swiper {
                width: 650px;
                height: 300px;
                background-color: rgb(211, 209, 209);
            }
            .swiper-slide img {
                width: 100%;
                height: 100%;
            }
            .buttons,
            .select {
                width: 200px;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./img/bn1.jpg" alt="" /></div>
                <div class="swiper-slide"><img src="./img/bn2.webp" alt="" /></div>
                <div class="swiper-slide"><img src="./img/bn3.webp" alt="" /></div>
                <div class="swiper-slide"><img src="./img/bn4.webp" alt="" /></div>
                <div class="swiper-slide"><img src="./img/bn5.webp" alt="" /></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <!-- 如果需要滚动条 -->
            <div class="swiper-scrollbar"></div>
        </div>
        <div class="buttons">
            <button class="lastPage">上一页</button>
            <button class="nextPage">下一页</button>
        </div>
        <div class="select">
            <button data-index="1">1</button>
            <button data-index="2">2</button>
            <button data-index="3">3</button>
            <button data-index="4">4</button>
            <button data-index="5">5</button>
        </div>
    </body>
    <script>
        // 用构造函数创建实例，形参分别是选择器和相关配置信息对象，配置信息以对象形式传递，根据不同属性实现不同效果
        var mySwiper = new Swiper(".swiper", {
            // 【一、基础配置相关的API____________________________________________________________】
            // direction: "vertical",    // Swiper的滑动方向，可设置为水平方向切换 horizontal（默认） 或垂直方向切换 vertical
            loop: true, //图片循环头尾相连
            initialSlide: 0, //设置优先显示指定下标的滑块，从0开始，就是设置从哪个图片开始滑动
            speed: 1000, //图片切换滑动的速度，默认300ms，非图片切换的间隔时间，速度可自定义
            effect: "fade", //设置Slide的切换效果，默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）。
            // fadeEffect: {//effect 如果设置了 fade, 只是设置了淡入, 还需要设置淡出
            //     crossFade: true,
            // },
            autoplay: true, //自动播放，默认3秒，可用下面属性调整图片切换时间
            // autoplay: {
            //     delay: 3000,//图片每3秒切换一张，可调整大小
            //     stopOnLastSlide: false,//自动播放到最后一页不动了，在 loop:true下无效；
            //     disableOnInteraction: true,//用户操作swiper之后，是否禁止autoplay。默认为true：停止
            // },
            grabCursor: true, //鼠标放上去，箭头变成小手形状
            // slidesPerView : 2,  //设置 slider 容器能够同时显示的 slide 数量,注意宽宽可配合设置合适
            // freeMode: true, //拖拽惯性滑动，力度越大滑动越多
            //keyboard : true,//开启左右、上下按键的滑动控制
            // mousewheel: true,//开启鼠标滚轮控制Swiper切换。可设置鼠标选项，或true使用默认值

            //【二、events事件相关的API____________________________________________________________】
            on: {
                //事件函数，初始化后执行。
                init: function (swiper) {
                    //也可以简写：init(){   }
                    console.log("初始化后执行...");
                    // this.emit('transitionEnd');//在初始化时触发一次transitionEnd事件，需要先设置transitionEnd
                },
                //开始滑动过渡时触发
                // slideChangeTransitionStart: function () {
                //     console.log("开始过渡...");
                // },
                // 滑动过渡完成后触发
                // slideChangeTransitionEnd: function () {
                //     console.log("过渡结束...");
                // },

                // 【三、属性相关的API____________________________________________________________】
                // 获取slide滑块的索引：activeIndex（当前索引）、previousIndex（上一个索引）
                slideChangeTransitionStart: function () {
                    console.log("当前索引：" + this.activeIndex); //当前索引
                    console.log("上一个索引：" + this.previousIndex); //上一个索引，一般写在过渡事件结束后
                },
                // 获取容器宽高：width、height
                init: function () {
                    console.log("初始化已完成...");
                    console.log("容器的宽高为:" + this.width + "," + this.height);
                },
            },

            //【四、内置元素选择____________________________________________________________】
            // 如果需要分页器
            pagination: {
                el: ".swiper-pagination",
            },
            // 如果需要前进后退按钮
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            // 如果需要滚动条
            scrollbar: {
                el: ".swiper-scrollbar",
            },
        });
        //【三、方法相关的API____________________________________________________________】
        // 获取2个按钮对象
        var lastPage = document.querySelector(".lastPage");
        var nextPage = document.querySelector(".nextPage");
        //slideNext()/slidePrev() 切换到下/上一个滑块
        lastPage.onclick = function () {
            mySwiper.slidePrev(100);
        };
        nextPage.onclick = function () {
            mySwiper.slideNext(100);
        };

        //slideTo() 控制 Swiper 切换到指定 slide => mySwiper.slideTo(下标, 速度, runCallbacks:tuue、false,设置是否触发滑动过渡功能)
        var select = document.querySelector(".select");
        select.onclick = function (ev) {
            mySwiper.slideTo(ev.target.dataset.index, 1000, false);
        };
    </script>
</html>
